<template>
  <div class="box">
    <hello-world></hello-world>
  </div>
</template>

<!-- <script>
import HelloWorld from './HelloWorld.vue'
export default {
  name: 'sdxzq',
  components: {
    HelloWorld
  }
}
</script> -->
<script setup>
import HelloWorld from './HelloWorld.vue'
defineOptions({
  name: 'sdxzq'
})
</script>

<style lang="scss" scoped>
//直接写无效
/* .msg {
  text-decoration: underline;
  font-size: 30px;
  color: red;
} */
// 第一种写法
/* .box {
  :deep() {
    .msg {
      text-decoration: underline;
      font-size: 30px;
      color: red;
    }
  }
} */

// 第二种写法
.box {
  ::v-deep {
    .msg {
      text-decoration: underline;
      font-size: 30px;
      color: red;
    }
  }
}
</style>
